<template>
  <el-row class="product-manage-module">
    <el-col class="title">
      <el-row type="flex" justify="space-between">
        <el-col>产品管理</el-col>
        <el-col>
          <el-button type="primary">导入 BOM</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="search">
      <el-row type="flex" :gutter="24">
        <el-col>
          <el-input v-model="planNo" placeholder="请输入产品型号"></el-input>
        </el-col>
        <el-col>
          <el-button type="primary" :disabled="planNo === ''" @click="selectCallback">查询</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col>
      <el-table :data="materialData">
        <el-table-column
          v-for="item in columns"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
        ></el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" v-if="total" :total="total"></el-pagination>
    </el-col>
  </el-row>
</template>
<script>
import { getProductMaterial } from "@/api";
export default {
  name: "productManage",
  data() {
    return {
      planNo: "",
      columns: [
        {
          prop: "stationNo",
          label: "工位编号"
        },
        {
          prop: "stationName",
          label: "工位名称"
        },
        {
          prop: "planNo",
          label: "计划号"
        },
        {
          prop: "planNum",
          label: "计划数量"
        },
        {
          prop: "current",
          label: "现有物料"
        },
        {
          prop: "remark",
          label: "备注"
        }
      ],
      materialData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    selectCallback() {
      this.getTableList();
    },
    getTableList() {
      const params = {
        planNo: this.planNo,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      getProductMaterial(params).then(res => {
        if (res.data.code === "0") {
          this.materialData = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.product-manage-module {
  .title,
  .search {
    padding-bottom: 10px;
  }
}
</style>